<template>
  <view class="page-title-Info">
    <view class="page-title">
      <text>{{ title }}</text>
      <image
        v-if="pageTipImage"
        class="page-tip"
        src="@/pages/appliance/static/TT/ic_tips.png"
        @click="showPageTip"
      ></image
    ></view>
    <view class="page-des" v-if="temp && !showBar">{{ $t('TT.PageTitle.Current.Lable') }} {{ temp }} ℃</view>
    <view class="page-des" v-if="showBar">{{ $t('TT.PageTitle.Current.Lable') }} -- ℃</view>
    <view class="page-hint" v-if="pageHint">{{ pageHint }}</view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  title?: string
  pageTipImage?: boolean
  temp?: string
  showBar?: boolean
  pageHint?: string
}>()

const emit = defineEmits<{
  (e: 'showPageTip'): void
}>()

function showPageTip() {
  emit('showPageTip')
}
</script>
<style lang="less">
@import '@/styles/common.less';
.page-title-Info {
  font-family: 'PingFang SC';
  font-style: normal;
  position: relative;
  padding: 32rpx 32rpx 0 32rpx;
  text-align: left;
  color: var(--dark-color);

  .page-title {
    font-weight: 500;
    font-size: 48rpx;
    line-height: 68rpx;
    color: var(--dark-color);
    padding-bottom: 24rpx;
  }

  .page-tip {
    width: 32rpx;
    height: 32rpx;
    margin-left: 8rpx;
  }

  .page-des {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    display: inline-block;
    color: #818790;
  }

  .page-hint {
    width: 108rpx;
    margin-left: 16rpx;
    padding: 4rpx 14rpx;
    display: inline-block;
    font-weight: 500;
    border-radius: 20rpx;
    font-family: 'PingFang SC';
    font-size: 20rpx;
    color: var(--primary-color);
    text-align: center;
    border: 2rpx solid var(--primary-color);
    box-sizing: border-box;
  }
}
</style>
